<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品条目</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/item.css"/>
    <script src="${pageContext.request.contextPath}/static/item.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function addCart(goodsId, inputId) {
            var quantity = document.getElementById(inputId).value;
            $.ajax({
                type: "POST",
                url: '${pageContext.request.contextPath}/carts/add',
                dataType: 'json',
                data: {
                    "goodsId": goodsId,
                    "quantity": quantity
                },
                success: function (data) {
                    // alert(data.data);
                    $("#cart_quantity").html(data.data);
                }
            });

        }
    </script>
</head>
<body>
<div class="header">
    <div class="w">
        <ul class="nav-left">
            <li>
                <div class="logo">
                    中国大陆
                </div>
            </li>
            <li>deng1259070</li>
            <li><a href="#">手机逛淘宝</a></li>
        </ul>
        <ul class="nav-right">
            <li><a href="${pageContext.request.contextPath}/foods">淘宝网首页</a></li>
            <li>
                <a href="${pageContext.request.contextPath}/carts/getCarts">
                    购物车<span id="cart_quantity" style="color:red;font-weight: 700;margin:0 2px;">${fn:length(carts)}</span>
                </a>
            </li>
            <li><a href="#">联系客服</a></li>
        </ul>
    </div>
</div>
<div class="goods w">
    <ul>
        <c:forEach items="${foodList}" var="item" >
        <li>
            <img src="${pageContext.request.contextPath}/static/${item.icon}"/>
            <h3>￥${item.price}</h3>
            <h4>${item.name}</h4>
            <div class="goods-item-buy">
                <a href="javascript:void(0);" onclick="sub('item${item.id}')" class="item-icon">-</a>
                <input type="text" id="item${item.id}" value="1" onkeyup="value=value.replace(/\D/g,'')" class="num" />
                <a href="javascript:void(0);" onclick="add('item${item.id}')" class="item-icon">+</a>

                <a href="javascript:void(0);">立即下单</a>
                <a href="javascript:void(0);" style="margin: 0" onclick="addCart(${item.id}, 'item${item.id}')">加入购物车</a>
            </div>
        </li>
        </c:forEach>
    </ul>
</div>

<div class="w">

</div>

</body>
</html>
